<script>
import PageHeader from "./components/PageHeader.vue";
import PageFooter from "./components/PageFooter.vue";
export default {
  components: { PageHeader, PageFooter },
};
</script>

<template>
  <!-- 头部组件 -->
  <page-header />

  <!-- 导航组件 -->
  <nav>
    <RouterLink to="/">首页</RouterLink>
    <router-link to="/order">订单</router-link>
    <router-link to="/carts">购物车</router-link>
    <router-link to="/goods">上架物品</router-link>
    <router-link to="/about">关于</router-link>
  </nav>
  <!-- 动态内容区域 -->
  <main>
    <router-view />
  </main>

  <!-- 底部组件 -->
  <page-footer />
</template>

<style scoped>
a {
  display: inline-block;
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-left: 4px solid #52bdf3;
  border-right: 4px solid #52bdf3;
  color: black;
}
a:hover {
  color: white;
  background-color: red;
  border-left: 4px solid red;
  border-right: 4px solid red;
}
</style>
